<template>
	<div id="homesearch">
		<div class="searchone">
			{{time}}。
		</div>
		<div class="searchtwo">
			<div class="searchthree">
				<div class="searchinputimgs">
					<img src="../../../public/images/首页@3x_07.jpg" class="searchinputimg">
				</div>
				<div class="searchinputs">
					<router-link to="/jumpsearch">
						<input type="text" class="searchinput" placeholder="请输入您想要的商品">
					</router-link>
				</div>
			</div>
			<div class="searchfour">
				<img src="../../../public/images/首页@3x_09.jpg" class="searchmsgimg">
			</div>
		</div>
	</div>
</template>

<script>
	export default
	{
		data()
		{
			return{
				time:''
			}
		},
		created()
		{
			var times=new Date()
			console.log(times.getHours())
			if(times.getHours()>5&&times.getHours()<12)
			{
				this.time="上午好"
			}
			else if(times.getHours()>12&&times.getHours()<17)
			{
				this.time="下午好"
			}
			else
			{
				this.time="晚上好"
			}
		},
		methods:
		{
			
		}
	}
</script>

<style>
	#homesearch{
		width: 100%;
		height: 100px;
		margin-top: 20px;
	}
	.searchone{
		width: 100%;
		height: 50px;
		text-align: left;
		text-indent: 30px;
		font-size: 1.875rem;
		font-weight:600;
	}
	.searchtwo{
		width: 100%;
		height: 50px;
	}
	.searchthree{
		width: 80%;
		height: 50px;
		float: left;
		border-radius: 5px;
		border: none;
		background-color: #ececec;
		outline: none;
		margin-left: 5%;
	}
	.searchfour{
		width: 10%;
		height: 50px;
		float: left;
	}
	.searchmsgimg{
		width: 40px;
		height: 40px;
		float: right;
		margin-top: 5px;
	}
	.searchinputimgs{
		width: 8%;
		height: 45px;
		padding-left: 2%;
		padding-top: 5px;
		float: left;
	}
	.searchinputimg{
		width: 35px;
		height: 35px;
		float: left;
	}
	.searchinputs{
		width: 90%;
		height: 50px;
		float: left;
	}
	.searchinput{
		width: 95%;
		height: 48px;
		border: none;
		background-color: #ececec;
		float: left;
		padding-left: 2%;
		outline: none;
		color: #ccc;
	}
	input::-webkit-input-placeholder {
		/* placeholder颜色  */
		color: #ccc;
		/* placeholder字体大小  */
		font-size: 1.125rem;
	}
</style>
